<template>
  <div class="mod-config">
    <basic-container>
      <navigationHeTong :sign="{a:false,b:false,c:false,d:false,e:false,f:true}"></navigationHeTong>
      <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">受约人变更</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">

            <el-form-item label="姓名">
              <el-input v-model="dataForm.jjMc" placeholder="姓名" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="受约人">
              <el-input v-model="dataForm.jjMc" placeholder="受约人" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="合同">
              <el-select v-model="dataForm.fpZt" placeholder="请选择" :clearable="true">
                <el-option value="已退回" label="已退回"></el-option>
                <el-option value="审核中" label="审核中"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="dataForm.jjMc" placeholder="职位" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="调转说明">
              <el-input v-model="dataForm.jjMc" placeholder="调转说明" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-if="showTable==1" @click="scoreIn">继承得分#</el-button>
                <el-select v-model="dataForm.fzly" placeholder="分值来源" style="width:160px;margin-left:10px;" :clearable="true">
                    <el-option v-for="(item,index) in fzlyList" :value="item.value" :label="item.label" :key="index"></el-option>
                </el-select>
              <el-button icon="el-icon-search" type="primary" class="marginLeft"
                        @click="getDataList(1)">检索
              </el-button>
            </el-form-item>
          </el-form>
          </div>
        </div>
      <div class="avue-crud">
        <div  style="border-top: 1px solid #b0bde2">
          <div class="mt10">
            业绩合同
            <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
            <span style="margin-left:160px;" >
              数据范围
                        <el-radio-group v-model="radioTwo">
                          <el-radio v-for="(item,index) in radioTwoList" :label="item.value" :key="index">{{ item.name }}</el-radio>
                        </el-radio-group>
             </span>
            <div style="float:right">
                  <el-button type="primary" plain>绑定</el-button>
                  <el-button type="primary" plain>删除</el-button>
              </div>
          </div>
        </div>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          v-loading="dataListLoading">
          <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column
            prop="htMc"
            header-align="center"
            align="center"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="100"
            label="受约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)" :key="index">
                <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                  <el-badge
                      :value="cutout(scope.row.shouyueName).length"
                      :max="9"
                      v-if="
                        cutout(scope.row.shouyueName).length > 2 && index === 0
                      "
                      style="margin-top: 10px;margin-right: 0px;"
                    >
                      <span>{{ item }}</span>
                    </el-badge>
                    <span v-else>{{ item }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="职位">
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="时间">
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="关联月份数">
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="调转说明">
          </el-table-column>
          <div v-if="showTable==1">
              <el-table-column
                prop="htMs"
                header-align="center"
                v-if="dataForm.fzly==1"
                align="center"
                label="原单位得分">
            </el-table-column>
            <el-table-column
                prop="htMs"
                header-align="center"
                align="center"
                v-if="dataForm.fzly==2"
                label="默认分值">
            </el-table-column>
            <el-table-column
                prop="htMs"
                header-align="center"
                align="center"
                v-if="dataForm.fzly==3"
                label="原合同完成情况">
            </el-table-column>
          </div>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="原单位得分">
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="明细">
            <template slot-scope="scope">
                <a style="text-decoration:underline;color: #0e258c;cursor:pointer;">明细</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="htMs"
            header-align="center"
            align="center"
            label="原合同">
            <template slot-scope="scope">
                <a style="text-decoration:underline;color: #0e258c;cursor:pointer;">明细</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      </div>

    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj} from '@/api/hetongrenwu/hetonghtxxdjb'
import {radioTwoList} from '@/api/hetongrenwu/hetonghtxxdjb'
import { validatenull } from "@/util/validate";
import {mapGetters} from 'vuex'

export default {
  components:{
    },
  data() {
    return {
      dataForm: {
        key: '',
        fzly:''
      },
      dataList: [],
      fzlyList:[
          {value:"1",label:"原单位得分"},
          {value:"2",label:"默认分值"},
          {value:"3",label:"原合同完成情况"},
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio:'1',
      radioTwo:'1',
      showTable:1,
      zhibiaoForm:{},
      genzongForm:{},
      searchadvanced: true,
      searchheight: '0',
      radioTwoList:radioTwoList
    }
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo=params.radioTwo
    }
    //this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    scoreIn(){
        this.showTable=2
    },
    //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1

            }
        },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      })).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    }
  }
}
</script>
